#@admin_layout()
#define admin_body()
<h1>Tab选项卡 - 页面元素</h1>
<hr>

<blockquote class="layui-elem-quote">导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。</blockquote>
<blockquote class="layui-elem-quote">依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）</blockquote>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>默认Tab选项卡</legend>
</fieldset>
<p>Tab广泛应用于Web页面，因此我们也对其进行了良好的支持。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。
    这是一个最基本的例子：</p>

<div class="layui-tab"><!-- 通过增加 layui-tab-brief 等得到不同风格 -->
    <ul class="layui-tab-title">
        <li class="layui-this">A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>

    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <blockquote class="layui-elem-quote">如果需要对Tab进行外部新增、删除、切换等操作，请移步到“内置组件-常用元素操作”页面中查阅：基础方法</blockquote>
        </div>
        <div class="layui-tab-item">内容B</div>
        <div class="layui-tab-item">内容C</div>
        <div class="layui-tab-item">内容D</div>
    </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>Tab简介风格</legend>
</fieldset>
<div class="layui-tab layui-tab-brief"><!-- 通过增加 layui-tab-brief 等得到不同风格 -->
    <ul class="layui-tab-title">
        <li class="layui-this">A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>

    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容A</div>
        <div class="layui-tab-item">内容B</div>
        <div class="layui-tab-item">内容C</div>
        <div class="layui-tab-item">内容D</div>
    </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>Tab卡片风格</legend>
</fieldset>
<div class="layui-tab layui-tab-card"><!-- 通过增加 layui-tab-brief 等得到不同风格 -->
    <ul class="layui-tab-title">
        <li class="layui-this">A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>

    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容A</div>
        <div class="layui-tab-item">内容B</div>
        <div class="layui-tab-item">内容C</div>
        <div class="layui-tab-item">内容D</div>
    </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>Tab响应式</legend>
</fieldset>
<p>当容器的宽度不足以显示全部的选项时，即会自动出现展开图标，如下以卡片风格为例（注意：所有Tab风格都支持响应式）：</p>
<div class="layui-tab layui-tab-card" style="width: 300px"><!-- 通过增加 layui-tab-brief 等得到不同风格 -->
    <ul class="layui-tab-title">
        <li class="layui-this">A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>

    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容A</div>
        <div class="layui-tab-item">内容B</div>
        <div class="layui-tab-item">内容C</div>
        <div class="layui-tab-item">内容D</div>
    </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>带删除的Tab</legend>
</fieldset>
<p>你可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除</p>
<div class="layui-tab layui-tab-card" lay-allowClose="true"><!-- 通过增加 layui-tab-brief 等得到不同风格 -->
    <ul class="layui-tab-title">
        <li class="layui-this">A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>

    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容A</div>
        <div class="layui-tab-item">内容B</div>
        <div class="layui-tab-item">内容C</div>
        <div class="layui-tab-item">内容D</div>
    </div>
</div>
<p>与默认相比没有什么特别的结构，就是多了个属性 lay-allowClose="true"</p>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>ID焦点定位</legend>
</fieldset>
<p>你可以通过对选项卡设置属性 lay-id="xxx" 来作为唯一的匹配索引，以用于外部的定位切换，如后台的左侧导航、以及页面地址 hash的匹配。（点击切换Tab，观察浏览器地址变化）</p>
<div class="layui-tab layui-tab-card" lay-allowClose="true" lay-filter="test"><!-- 通过增加 layui-tab-brief 等得到不同风格 -->
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="11">A</li>
        <li lay-id="22">B</li>
        <li lay-id="33">C</li>
        <li lay-id="44">D</li>
    </ul>

    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容11</div>
        <div class="layui-tab-item">内容22</div>
        <div class="layui-tab-item">内容33</div>
        <div class="layui-tab-item">内容44</div>
    </div>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>提示</legend>
</fieldset>
<p>无论是导航、还是Tab，都需依赖 element模块，大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如Tab事件监听等，需按照场景选择性使用。你可以移步文档左侧【内置组件 - 基本元素操作 element】了解详情</p>
#end

#define admin_script()
<script>
    layui.use(['element', 'code'], function () {
        var element = layui.element;
        layui.code();

        //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);//假设当前地址为：http://a.com#test=22，那么选项卡会自动切换到“B”这一项

        element.on('tab(test)', function () {
            location.hash = 'test=' + this.getAttribute('lay-id');
        });
    });
</script>
#end